<template>
  <view class="container">
    <!-- 设备图片 -->
    <view class="device-image">
      <image 
        v-if="deviceInfo.imgUrl" 
        :src="deviceInfo.imgUrl" 
        mode="aspectFill"
        class="image"
      ></image>
      <view v-else class="no-image">
        <text class="no-image-text">暂无图片</text>
      </view>
    </view>

    <!-- 设备信息 -->
    <view class="info-section">
      <view class="info-item">
        <text class="label">设备名称</text>
        <text class="value">{{ deviceInfo.deviceName }}</text>
      </view>
      <view class="info-item">
        <text class="label">设备状态</text>
        <text class="value" :class="getStatusClass(deviceInfo.status)">
          {{ getStatusText(deviceInfo.status) }}
        </text>
      </view>
      <view class="info-item">
        <text class="label">设备编号</text>
        <text class="value">{{ deviceInfo.deviceNo }}</text>
      </view>
      <view class="info-item">
        <text class="label">设备型号</text>
        <text class="value">{{ deviceInfo.model }}</text>
      </view>
      <view class="info-item">
        <text class="label">通道数量</text>
        <text class="value">{{ deviceInfo.channelCount }}</text>
      </view>
      <view class="info-item">
        <text class="label">安装位置</text>
        <text class="value">{{ deviceInfo.siteName }}</text>
      </view>
      <view class="info-item">
        <text class="label">安装时间</text>
        <text class="value">{{ deviceInfo.createTime }}</text>
      </view>
      <view class="info-item">
        <text class="label">更新时间</text>
        <text class="value">{{ deviceInfo.updateTime }}</text>
      </view>
    </view>

    <!-- 导航按钮 -->
    <view class="action-section">
      <button class="action-btn" @click="handleNavigate">
        <image class="action-icon" src="/static/icons/navigate-witre.svg" mode="aspectFit"></image>
        导航
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getDeviceDetail } from '@/api/device';
import type { DeviceVO } from '@/api/device/types';

// 设备信息
const deviceInfo = ref<DeviceVO>({
  id: 0,
  deviceName: '',
  deviceNo: '',
  model: '',
  status: 1,
  channelCount: 0,
  siteName: '',
  createTime: '',
  updateTime: '',
  location: {
    lat: 0,
    lon: 0
  }
});

// 获取设备详情
const getDeviceInfo = async (id: number) => {
  try {
    const result = await getDeviceDetail(id, 1);
    console.log(result);
    if (result.data) {
      deviceInfo.value = result.data;
      deviceInfo.value.siteName = result.data.location.address;
    }
  } catch (error) {
    console.error('获取设备详情失败：', error);
    uni.showToast({
      title: '获取设备详情失败',
      icon: 'error'
    });
  }
};

// 获取状态文本
const getStatusText = (status: number) => {
  switch (status) {
    case 0:
      return '未使用';
    case 1:
      return '离线';
    case 2:
      return '在线';
    case 3:
      return '故障';
    case 4:
      return '维护中';
    case 5:
      return '待维护';
    default:
      return '未知';
  }
};

// 获取状态样式类
const getStatusClass = (status: number) => {
  switch (status) {
    case 2: // 在线
      return 'status-online';
    case 1: // 离线
      return 'status-offline';
    case 3: // 故障
      return 'status-error';
    case 4: // 维护中
    case 5: // 待维护
      return 'status-maintenance';
    default: // 未使用
      return 'status-offline';
  }
};

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

// 处理导航
const handleNavigate = () => {
  if (!deviceInfo.value) {
    uni.showToast({
      title: '设备信息不存在',
      icon: 'error'
    });
    return;
  }

  uni.navigateTo({
    url: `/pages/device/navigate?id=${deviceInfo.value.id}`,
    fail: (error) => {
      console.error('跳转失败：', error);
      uni.showToast({
        title: '跳转失败',
        icon: 'error'
      });
    }
  });
};

// 页面加载时获取设备详情
onLoad((options) => {
  if (options.id) {
    getDeviceInfo(Number(options.id));
  } else {
    uni.showToast({
      title: '设备ID不存在',
      icon: 'error'
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
});
</script>

<style>
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.device-image {
  width: 100%;
  height: 400rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
}

.image {
  width: 100%;
  height: 100%;
}

.no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
}

.no-image-text {
  color: #999999;
  font-size: 28rpx;
}

.info-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  color: #666666;
  font-size: 28rpx;
  width: 150px;
}

.value {
  color: #333333;
  font-size: 28rpx;
}

.status-online {
  color: #52c41a;
}

.status-offline {
  color: #999999;
}

.status-error {
  color: #ff4d4f;
}

.status-maintenance {
  color: #faad14;
}

.action-section {
  padding: 30rpx;
}

.action-btn {
  width: 100%;
  height: 88rpx;
  background-color: #007aff;
  color: #ffffff;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}

.action-icon {
  color: #fff;
  width: 36rpx;
  height: 36rpx;
  margin-right: 12rpx;
}
</style> 